<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../static/css/layout.css">
    <link rel="stylesheet" href="../static/css/containerCss.css">
</head>
<body>

<div id="app">
    <el-drawer
            title="我是标题"
            :visible.sync="drawer"
            :with-header="false">
        <el-table
                :data="tableData"
                stripe
                style="width: 100%">
            <el-table-column
                    prop="idcard"
                    label="身份证号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="form_id"
                    label="病历号">
            </el-table-column>
        </el-table>
    </el-drawer>
    <el-container>

        <el-container>
<!--            页头-->
            <el-header heigh="400px">
                <el-tabs type="border-card" stretch @tab-click="leaveTab">
                    <el-tab-pane label="挂号" name="0" >挂号</el-tab-pane>
                    <el-tab-pane label="退号" name="1" >退号</el-tab-pane>
                    <el-tab-pane label="缴费" name="2" >缴费</el-tab-pane>
                    <el-tab-pane label="退费" name="3" >退费</el-tab-pane>
                </el-tabs>


            </el-header>
            <el-main  v-show="tabIndex==0" v-model="registForm">
                <!--                第一行内容 包括身份证证号 姓名 家庭住址-->
                <el-row>
                    <el-col :span="5" :pull="2">
                        身份证证号
                    </el-col>
                    <el-col :span="3" :pull="3">
                        <el-input placeholder="请输入身份证证号" v-model="registForm.patientId"  maxlength="18"  show-word-limit clearable></el-input>
                    </el-col>

                    <el-col :span="2" :pull="3">
                        姓名
                    </el-col>
                    <el-col :span="3"  :pull="3">
                        <el-input placeholder="请输入名字" v-model="registForm.patientName"   clearable></el-input>
                    </el-col>

                    <el-col :span="5" :pull="4">
                        家庭住址
                    </el-col>
                    <el-col :span="4"  :pull="5"  >
                        <el-input placeholder="请输入家庭住址" v-model="registForm.address"   clearable></el-input>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="5" :pull="2">
                        电话
                    </el-col>
                    <el-col :span="3" :pull="3">
                        <el-input placeholder="请输入电话" v-model="registForm.tel"  maxlength="18"  show-word-limit clearable></el-input>
                    </el-col>

                    <el-col :span="2" :pull="3">
                        年龄
                    </el-col>
                    <el-col :span="3"  :pull="3">
                        <el-input placeholder="请输入 年龄" v-model="registForm.age"   clearable></el-input>
                    </el-col>

                    <el-col :span="5" :pull="4">
                        工作单位
                    </el-col>
                    <el-col :span="4"  :pull="5"  >
                        <el-input placeholder="请输入工作单位" v-model="registForm.company"   clearable></el-input>
                    </el-col>
                </el-row>
                <!--                第三行内容 科室 医生和挂号费-->
                <el-row>
                    <el-col :span="5" :pull="2">
                        科室
                    </el-col>
                    <el-col :span="3" :pull="3">
                        <el-select v-model="departvalue" filterable placeholder="请选择" @change="departChange">
                            <el-option

                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="2" :pull="3">
                        医生
                    </el-col>
                    <el-col :span="3"  :pull="3">
                        <el-select v-model="fffV" filterable placeholder="请选择" @change="docChange">
                            <el-option
                                    v-if="item.value==departvalue"
                                    v-for="item in docs"
                                    :key="item.id"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="5" :pull="4">
                        挂号费
                    </el-col>
                    <el-col :span="4"  :pull="5"  >
                        <el-input   clearable v-model="registForm.regisCost" disabled></el-input>
                    </el-col>

                </el-row>
                <el-button type="primary" @click="insertRegister">挂号完毕</el-button>
                <el-button @click="ye">重置</el-button>
                <el-button @click="drawer = true" type="info" style="margin-left: 16px;">
                    打开消息列表
                </el-button>


            </el-main>
<!--            退号界面-->
            <el-main  v-show="tabIndex==1">
                <!--                第一行内容 包括身份证证号 姓名 家庭住址-->
                <el-row>
                    <el-col :span="5" :pull="2">
                        身份证证号
                    </el-col>
                    <el-col :span="3" :pull="3">
                        <el-input placeholder="请输入身份证证号" v-model="manId"  maxlength="18"  show-word-limit clearable></el-input>
                    </el-col>

                    <el-col :span="2" :pull="3">
                        姓名
                    </el-col>
                    <el-col :span="3"  :pull="3">
                        <el-input placeholder="请输入名字" v-model="name"   clearable></el-input>
                    </el-col>

                    <el-col :span="5" :pull="4">
                        家庭住址
                    </el-col>
                    <el-col :span="4"  :pull="5"  >
                        <el-input placeholder="请输入家庭住址" v-model="address"   clearable></el-input>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="5" :pull="2">
                        电话
                    </el-col>
                    <el-col :span="3" :pull="3">
                        <el-input placeholder="请输入电话" v-model="manId"  maxlength="18"  show-word-limit clearable></el-input>
                    </el-col>

                    <el-col :span="2" :pull="3">
                        年龄
                    </el-col>
                    <el-col :span="3"  :pull="3">
                        <el-input placeholder="请输入 年龄" v-model="name"   clearable></el-input>
                    </el-col>

                    <el-col :span="5" :pull="4">
                        工作单位
                    </el-col>
                    <el-col :span="4"  :pull="5"  >
                        <el-input placeholder="请输入工作单位" v-model="address"   clearable></el-input>
                    </el-col>
                </el-row>
                <!--                第三行内容 科室 医生和挂号费-->
                <el-row>
                    <el-col :span="5" :pull="2">
                        科室
                    </el-col>
                    <el-col :span="3" :pull="3">
                        <el-select v-model="value" filterable placeholder="请选择">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="2" :pull="3">
                        医生
                    </el-col>
                    <el-col :span="3"  :pull="3">
                        <el-select v-model="value" filterable placeholder="请选择">
                            <el-option
                                    v-for="item in docs"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="5" :pull="4">
                        挂号费
                    </el-col>
                    <el-col :span="4"  :pull="5"  >
                        <el-input   clearable v-model="registerPrice" disabled></el-input>
                    </el-col>

                </el-row>
                <el-button type="primary">退号</el-button>
                <el-button @click="drawer = true" type="info" style="margin-left: 16px;">
                    打开消息列表
                </el-button>


            </el-main>
<!--            缴费界面-->
            <el-main  v-show="tabIndex==2" v-model="payForm">
                <!--                第一行内容 包括身份证证号 姓名 家庭住址-->
                <el-row>
                    <el-col :span="5" :pull="2">
                        收费单号
                    </el-col>
                    <el-col :span="3" :pull="3">
                        <el-input placeholder="收费单号" v-model="payForm.chargeId"  maxlength="18"  show-word-limit clearable></el-input>
                    </el-col>

                    <el-col :span="2" :pull="3">
                        姓名
                    </el-col>
                    <el-col :span="3"  :pull="3">
                        <el-input placeholder="请输入名字" v-model="payForm.patientName"  disabled  clearable></el-input>
                    </el-col>

                    <el-col :span="5" :pull="4">
                        家庭住址
                    </el-col>
                    <el-col :span="4"  :pull="5"  >
                        <el-input placeholder="请输入家庭住址" v-model="payForm.xxaddress" disabled   clearable></el-input>
                    </el-col>
                    <el-col :span="2"  :pull="4">
                        <el-button @click="injecttion">导入</el-button>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="5" :pull="2">
                        电话
                    </el-col>
                    <el-col :span="3" :pull="3">
                        <el-input placeholder="请输入电话" v-model="payForm.tel" disabled  maxlength="11" disabled  show-word-limit clearable></el-input>
                    </el-col>

                    <el-col :span="2" :pull="3">
                        年龄
                    </el-col>
                    <el-col :span="3"  :pull="3">
                        <el-input placeholder="请输入 年龄" v-model="payForm.age" disabled  clearable></el-input>
                    </el-col>

                    <el-col :span="5" :pull="4">
                        工作单位
                    </el-col>
                    <el-col :span="4"  :pull="5"  >
                        <el-input placeholder="请输入工作单位" v-model="payForm.company" disabled   clearable></el-input>
                    </el-col>
                </el-row>
                <!--                第三行内容 科室 医生和挂号费-->
                <el-row>
                    <el-col :span="5" :pull="2">
                        科室
                    </el-col>
                    <el-col :span="3" :pull="3">
                        <el-input   clearable v-model="payForm.departmentName" disabled></el-input>
                    </el-col>
                    <el-col :span="2" :pull="3">
                        医生
                    </el-col>
                    <el-col :span="3"  :pull="3">
                        <el-input   clearable v-model="payForm.doctorName" disabled></el-input>
                    </el-col>
                    <el-col :span="5" :pull="4">
                        药费
                    </el-col>
                    <el-col :span="4"  :pull="5"  >
                        <el-input   clearable v-model="payForm.drugTotalPrice" disabled></el-input>
                    </el-col>

                </el-row>
                <el-button type="primary">付清</el-button>
                <el-button @click="drawer = true" type="info" style="margin-left: 16px;">
                    打开消息列表
                </el-button>


            </el-main>
<!--            退费界面  没发药之前随便退-->
            <el-main  v-show="tabIndex==3">
                <!--                第一行内容 包括身份证证号 姓名 家庭住址-->
                <el-row>
                    <el-col :span="5" :pull="2">
                        身份证证号
                    </el-col>
                    <el-col :span="3" :pull="3">
                        <el-input placeholder="请输入身份证证号" v-model="manId"  maxlength="18"  show-word-limit clearable></el-input>
                    </el-col>

                    <el-col :span="2" :pull="3">
                        姓名
                    </el-col>
                    <el-col :span="3"  :pull="3">
                        <el-input placeholder="请输入名字" v-model="name"   clearable></el-input>
                    </el-col>

                    <el-col :span="5" :pull="4">
                        家庭住址
                    </el-col>
                    <el-col :span="4"  :pull="5"  >
                        <el-input placeholder="请输入家庭住址" v-model="address"   clearable></el-input>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="5" :pull="2">
                        电话
                    </el-col>
                    <el-col :span="3" :pull="3">
                        <el-input placeholder="请输入电话" v-model="manId"  maxlength="18"  show-word-limit clearable></el-input>
                    </el-col>

                    <el-col :span="2" :pull="3">
                        年龄
                    </el-col>
                    <el-col :span="3"  :pull="3">
                        <el-input placeholder="请输入 年龄" v-model="name"   clearable></el-input>
                    </el-col>

                    <el-col :span="5" :pull="4">
                        工作单位
                    </el-col>
                    <el-col :span="4"  :pull="5"  >
                        <el-input placeholder="请输入工作单位" v-model="address"   clearable></el-input>
                    </el-col>
                </el-row>
                <!--                第三行内容 科室 医生和挂号费-->
                <el-row>
                    <el-col :span="5" :pull="2">
                        科室
                    </el-col>
                    <el-col :span="3" :pull="3">
                        <el-select v-model="value" filterable placeholder="请选择">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="2" :pull="3">
                        医生
                    </el-col>
                    <el-col :span="3"  :pull="3">
                        <el-select v-model="value" filterable placeholder="请选择">
                            <el-option
                                    v-for="item in docs"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="5" :pull="4">
                        挂号费
                    </el-col>
                    <el-col :span="4"  :pull="5"  >
                        <el-input   clearable v-model="registerPrice" disabled></el-input>
                    </el-col>

                </el-row>
                <el-button type="primary">退费</el-button>
                <el-button @click="drawer = true" type="info" style="margin-left: 16px;">
                    打开消息列表
                </el-button>


            </el-main>
<!--            页脚可以放些图片-->
            <el-footer >
                <div class="demo-image__lazy">
                    <el-image v-for="url in urls" :key="url" :src="url" lazy></el-image>
                </div>
            </el-footer>
        </el-container>
    </el-container>


</div>
</body>
<!--axios min-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    var tempDoc=[]
    var tempDertment=[]
    var app=new Vue({
        el:"#app",
        components:{

        },
        created(){
            axios.get("http://localhost:8900/menuControl/showLabel").then(function (request) {
                console.log(request)
                var json01=request.data[0];
                var json02=request.data[1];
                console.log(json02)
                this.docs=[]
                for (var value of json01) {
                    let temp={value:"1",label:"1",cost:"0",id:"0"}
                    temp.value=value.departId
                    temp.label=value.decName
                    temp.cost=value.cost
                    temp.id=value.id
                    tempDoc.push(temp);
                }
                for( var Val of json02){
                    let tempxx={value:'',label:''}
                    tempxx.value=Val.departmentId
                    tempxx.label=Val.departmentName
                    tempDertment.push(tempxx)
                }


                console.log()
                // console.log(tempDoc)




            }),function (err) {
                alert('error')
            }
        },
        mounted(){

        },
        methods:{
            injecttion:function(){
                var that=this
                axios.post("http://localhost:8900/menuControl/payOvered",this.payForm).then(function (response) {
                   console.log(response)

                    var json=response.data;
                    that.payForm.xxaddress=json.address;
                    that.payForm.patientName=json.patientName;
                    that.payForm.tel=json.tel;
                    that.payForm.age=json.age;
                    that.payForm.company=json.company;
                    that.payForm.doctorName=json.doctorName;
                    that.payForm.departmentName=json.departmentName;
                    that.payForm.drugTotalPrice=json.drugTotalPrice
                    console.log(that.payForm)
                }),function(err){
                    console.log('error')

                }
            },
            ye:function(){
                this.docs=tempDoc;
                this.options=tempDertment;
            },
            insertRegister:function(){
                axios.post("http://localhost:8900/menuControl/addRegister",this.registForm).then(function (response) {


            }),function(err){
                console.log('error')

            }

            },
            departChange:function(departvalue){
                let obj = {};
                obj = this.options.find((item)=>{ // 这里的userList就是上面遍历的数据源
                    return item.value === departvalue; // 筛选出匹配数据
                });
                console.log(obj.value);
                console.log(obj.label); // 这边的name就是对应label
                this.registForm.departmentName=obj.label

            },
            docChange:function(fffV){
                let obj = {};
                obj = this.docs.find((item)=>{ // 这里的userList就是上面遍历的数据源
                    return item.value === fffV; // 筛选出匹配数据
                });
                console.log(obj.value);
                console.log(obj.label); // 这边的name就是对应label
                this.registForm.doctorName=obj.label
                this.registForm.regisCost=this.docs[fffV].cost



            },
            leaveTab:function (tab,event) {
                console.log(tab,event);
                if(tab.name==='0'){
                    this.tabIndex= 0;

                }
                else if(tab.name==='1'){
                    this.tabIndex= 1;

                }
                else if(tab.name==='2'){
                    this.tabIndex= 2;

                }
                else if(tab.name==='3'){
                    this.tabIndex= 3;

                }


            },
            addregister:function () {

            }

        },
        data:{
            registForm:{
                patientId:'',
                patientName:'',
                address:'',
                tel:'',
                age:0,
                company:'',
                doctorName:'',
                departmentName:'',
                regisCost:''
            },
            rollReForm:{
                RollpatientId:'',
                RollpatientName:'',
                Rolladdress:'',
                Rolltel:'',
                Rollage:0,
                Rollcompany:'',
                RolldoctorName:'',
                RolldepartmentName:'',
                RollregisCost:0
            },
            payForm:{
                chargeId:'',
                patientName:'',
                xxaddress:'',
                tel:'',
                age:0,
                company:'',
                doctorName:'',
                departmentName:'',
                drugTotalPrice:0
            },
            RollpayForm:{
                RollpaypatientId:'',
                RollpaypatientName:'',
                Rollpayaddress:'',
                Rollpaytel:'',
                Rollpayage:0,
                Rollpaycompany:'',
                RollpaydoctorName:'',
                RollpaydepartmentName:'',
                RollpaydrugTotalPrice:0
            },
            docvalue:'',
            departvalue:'',
            tableData:'',
            drawer: false,
            tabIndex:0,
            fffV:'',
            activeName: "first",
            urls: [
                // './assets/doc.png'
            ],
            registerPrice:2222,
            manId:0,
            name:'',
            address:'',
            options: [{
                value: '1',
                label: '黄金糕'
            }, {
                value: '2',
                label: '双皮奶'
            }, {
                value: '3',
                label: '蚵仔煎'
            }, {
                value: '4',
                label: '龙须面'
            }, {
                value: '5',
                label: '北京烤鸭'
            }],
            xxxxvalue: '',
            value:'',
            docs:[]

        }
    })
</script>
</html>

